<template>
  <div class="popup" v-show="isShow">
    <div class="pop_pic">
      <img src="@/assets/pop_img.png" alt="" />
      <div class="pop_title">
        <img src="@/assets/pop_title.png" alt="" />
      </div>
      <div class="pop_img">
        <img src="@/assets/pop_text.png" alt="" />
      </div>
      <div class="close" @click="onClose">
        <img src="@/assets/Shut_btn.png" alt="" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.popup {
  // display: none;
  position: fixed;
  top: 0;
  width: 750px;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  .pop_pic {
    position: absolute;
    left:24px;
    top: 50%;
    margin-top: -400px;
    width: 702px;
  }
  .pop_title {
    position: absolute;
    left: 126px;
    top: 34px;
    width: 425px;
  }

  .pop_img {
    position: absolute;
    left: 45px;
    top: 145px;
    width:638px;
    height: 600px;
    overflow: scroll;
  }
  .pop_img img {
    width: 590px;
  }
  .close {position: absolute;left: 670px;top: -13px;width: 42px;}
}
</style>
<script>
export default {
  name: "popup",
  props: {
    isShow:{
        type:Boolean,
        default:false
    }
  },
  model: {
    prop: "isShow",
    event: "show"
  },
  methods: {
    onClose(){
      this.$emit("show",false)
    }
  }
};
</script>



